<template>
  <div class="article">
    <div class="title">
      <div>{{data.title}}</div>
    </div>
    <div class="message">
      <span>{{data.date | dateFormat}}&nbsp;&nbsp;&nbsp;作者:admin&nbsp;&nbsp;&nbsp;分类:{{data.classify}}&nbsp;&nbsp;&nbsp;阅读:{{data.readCount}}</span>
    </div>
    <div class="picture">
      <img :src="data.imgUrl" alt="">
    </div>
    <div class="content">
      <div class="content-text">
        {{data.content}}
      </div>
    </div>
    <div class="action">
      <ul>
        <li>
          <img src="/img/打赏.png" alt="">
        </li>
        <li><img src="/img/点赞.png" alt=""></li>
        <li><img src="/img/分享.png" alt="" style="width: 60%;height: 75%;margin-top: 11%"></li>
      </ul>
    </div>
    <div class="comment">
      <div v-if="isLoginOnline" class="comment-title">留下你的评论吧</div>
      <div v-else class="comment-title">请先登录才能评论！！！<router-link to="/login">登录</router-link></div>
      <form>
        <div class="comment-message">
          <textarea v-model="content" placeholder="请输入评语☺☺☺"></textarea>
        </div>
        <div class="submit">
          <button v-if="isLoginOnline" type="submit" @click="action">提交</button>
          <button v-else disabled>提交</button>
        </div>
      </form>
    </div>
    <div class="list">
      <div class="list-title">评论列表</div>
      <div class="list-content" v-for="(item,index) in commentData" :key="index">
        <div class="list-content-img">
          <img :src="item.u_profile_img" alt="">
        </div>
        <div class="list-content-message">
          <p><b>{{item.u_name}}</b> &nbsp;<b>{{item.date | dateFormatComment}}</b></p>
          <span>{{item.content}}</span>
        </div>
      </div>
      <div class="list-title" style="margin-bottom: 2rem;margin-top: 1rem;text-align: center">感谢阅读！！！</div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import dayjs from "dayjs";
export default {
  name: "Article",
  data(){
    return{
      data: '',
      isLoginOnline: false,
      aid: '',
      content: '',
      commentData: '',
      u_profile_img: ''
    }
  },
  methods: {
    //根据传递过来的id查询文章信息
    getData(){
      this.id = this.$route.query.id;
      let data = qs.stringify({
        id: this.$route.query.id
      })
      //根据id查找对应的文章信息
      this.axios.get(`${process.env.VUE_APP_URL}/getArticleById`,{
        params: {
          id: this.$route.query.id
        }
      }).then((res)=>{
        //console.log(res.data[0]);
        this.data = res.data[0];
      })
    },
    //判断是否处于登录状态
    isLogin(){
      if (sessionStorage.getItem('username')){
        this.isLoginOnline = true;
      }
    },
    //发表评论
    action(e){
      e.preventDefault();
      // console.log(this.id);
      let data = qs.stringify({
        u_name: sessionStorage.getItem('username'),
        u_profile_img: this.u_profile_img,
        aid: this.id,
        content: this.content
      });
      //判断评论内容是否有表情符号
      if (!this.isEmoji(this.content)){
        alert('评论内容不能有表情符号！！！');
      } else if (this.content ){
        this.axios({
          url: `${process.env.VUE_APP_URL}/addComment`,
          method: 'post',
          data: data
        }).then((res)=>{
          console.log(res.data);
          if (res.data.flag === true){
            alert(res.data.message);
            location.href = `http://192.168.3.4:8080/article?id=${this.id}`;
          }
        })
      }else{
        alert('评论内容不能为空！！！');
      }

    },
    //判断字符串是否包含表情
    isEmoji(str){
      let reg = /[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g;
      if(str.match(reg) === null){
        //console.log(str.match(reg))
        return true;
      }else{
        return false;
      }
    },
    //获取该文章对应的评论列表
    getCommentData(){
      this.axios.get(`${process.env.VUE_APP_URL}/getCommentData`,{
        params:{
          aid: this.$route.query.id
        }
      }).then((res)=>{
        this.commentData = res.data;

      })
    },
    //获取用户信息
    getUserMessage(){
      this.axios.get(`${process.env.VUE_APP_URL}/findUser`,{
        params: {
          username: sessionStorage.getItem('username')
        }
      }).then((res)=>{
        this.u_profile_img = res.data[0].profile_img;
      })
    }
  },
  created() {
    this.getData();
    this.isLogin();
    this.getCommentData();
    this.getUserMessage();
  },
  filters: {
    //处理日期过滤器
    dateFormat(date){
      return dayjs(date).format('YYYY-MM-DD');
    },
    dateFormatComment(date){
      return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
    }
  }
}
</script>

<style scoped>
  .article{
    width: 100%;
    height: 100%;
    background-color: white;
  }
  .title{
    width: 100%;
    height: 1.5rem;
    text-align: center;
  }
  .title div{
    height: 1.5rem;
    font-size: 0.7rem;
    padding-top: 0.5rem;
    text-indent: 0.1rem;
  }
  .message{
    width: 96%;
    height: 1.5rem;
    margin-top: 0.5rem;
    margin-left: 2%;
    text-align: center;
  }
  .message span{
    display: block;
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    font-size: 0.45rem;
    background-color: #EEEEEE;
  }
  .content{
    font-size: 0.6rem;
    color: #666666;
    margin-top: 0.6rem;
  }
  .content .content-text{
    width: 96%;
    margin-left: 2%;
    text-indent: 1.2rem;
  }
  .picture{
    width: 96%;
    height: 6rem;
    background-color: skyblue;
    margin-left: 2%;
  }
  .picture img{
    width: 100%;
    height: 100%;
  }
  .action{
    width: 96%;
    height: 1.5rem;
    margin-top: 1rem;
    margin-left: 2%;
    background-color: #EEEEEE;
  }
  .action ul{
    text-align: center;
    width: 55%;
    height: 1.5rem;
    margin: 0 auto;
  }
  .action ul li{
    display: inline-block;
    float: left;
    list-style: none;
    width: 33.333%;
    height: 1.5rem;
  }
  .action ul li img{
    width: 50%;
    height: 65%;
    margin-top: 15%;
  }
  .comment{
    display: inline-block;
    width: 96%;
    height: 5.3rem;
    margin-top: 1rem;
    margin-left: 2%;
    background-color: #EEEEEE;
  }
  .comment-title{
    width: 100%;
    height: 1rem;
    font-size: 0.6rem;
    text-align: center;
    line-height: 1rem;
    background-color: #EEEEEE;
  }
  .comment-message{
    width: 100%;
    height: 3rem;
  }
  .comment-message textarea{
    display: block;
    width: 99%;
    height: 80%;
    resize: none;
    font-size: 0.5rem;
    border: 1px red solid;
    margin: 0 auto;
  }
  .submit{
    display: block;
    width: 50%;
    height: 1rem;
    margin: 0 auto;
  }
  .submit button{
    display: block;
    width: 40%;
    height: 1rem;
    margin: 0 auto;
    font-size: 0.5rem;
  }
  .list{
    display: inline-block;
    width: 96%;
    margin-left: 2%;
    margin-top: 0.5rem;
    background-color: #EEEEEE;
    margin-bottom: 1.5rem;
  }
  .list-title{
    width: 99.5%;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.5rem;
    text-indent: 0.25rem;
    background-color: white;
    border: 1px #CCCCCC solid;
  }
  .list-content{
    width: 100%;
    height: 2.5rem;
    margin-top: 0.1rem;
    border-bottom: 3px white solid;
  }
  .list-content div{
    display: inline-block;
    float: left;
  }
  .list-content-img{
    width: 25%;
    height: 2.5rem;
  }
  .list-content-img img{
    display: block;
    width: 70%;
    height: 70%;
    margin: 15% auto 0;
  }
  .list-content-message{
    width: 75%;
    height: 2.5rem;
  }
  .list-content-message p{
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    font-size: 0.5rem;
    text-indent: 0.3rem;
  }
  .list-content-message p b:first-child{
    color: green;
  }
  .list-content-message p b:last-child{
    color: #888888;
    font-size: 0.4rem;
  }
  .list-content-message span{
    width: 97%;
    margin-left: 3%;
    font-size: 0.5rem;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
  }
</style>